import React, { Component } from "react";
import "./uploadtitle.css";

import placeholder from "../../images/upload.png";
import videoFileClose from "../../images/video_file_close.png";
import videoListPanelClose from "../../images/videolist-panel-close.png";

import Uploader from "./upload.js";
import config from "../../config.js";
import $ from "jquery";

class uploadtitle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reload: false,
      uploader: {},
      arr:[],
      videotitle:[],
      errorarr:[]
    };
  }
  
  inputtitle(event,index) {
    var name = event.target.value;
    var videotitle=this.state.videotitle
    videotitle[index]=name
    console.log(name);
    this.setState({videotitle:videotitle})
  }

  startUpload() {
    var fileList=this.props.fileList;

    this.props.closeUploadFilesPOPUP()
    
    console.log("点击事件里面的=======")
    console.log(fileList)

    var that = this;
    config.sendRequest(config.url.getSign, null, function(res) {
      var result = res;
      if (result.status == 200) {
        var getData = function() {
          return result.data;
        };

        var opt = {
          fileInputId: "fileinput",
          fileUploadId: "btn",
          getdata: getData(),
          onProgress: function(curFile) {
            console.log(curFile.status);
            console.log(curFile.progress);
            that.props.callbackParent(curFile.progress);
            if (curFile.status == 2) {
              that.setState({
                reload: true
              });
            }
          },
          onok: function(data,index,file,status) {
            console.log("video title~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
            var videotitle=that.state.videotitle;
            console.log("videotitle :",that.state.videotitle)

            function removeByValue(arr, val) {
              for(var i=0; i<arr.length; i++) {
                if(arr[i] == val) {
                  arr.splice(i, 1);
                  break;
                }
              }
            }

            var info = JSON.parse(sessionStorage.getItem("info"));
            var vname = that.state.videotitle[index]

            var a = {
              uid: info.uid,
              token: info.token,
              vid: data,
              name: vname
            };




            $.post(config.url.upload, a, function(r) {


             

              that.setState({
                videotitle
              })
              that.props.one()
              var errorarr=that.state.errorarr;
               r=JSON.parse(r);
               console.log(r);
              if(r.status==200){}else{
                console.log("xxxxxxxxxx")
                
                  errorarr.push({vid:data,name:vname,file:file})
                  console.log(errorarr)
                  that.setState({errorarr:errorarr})
              }  
              if(status==true){
                    console.log(errorarr)
                    if(errorarr.length>0){
                      that.props.errorarr(errorarr)
                    }
              }
              that.props.callbackParent(100, true);
              that.setState({
                reload: false
              });
            });
          },
        };

        var service = Uploader(opt);
        // service.init();
        console.log('add file 前的 filelist')
        console.log(service.fileList)
        
        console.log("service里面的filelist")
      

        service.addFile(fileList,function(){
          console.log("添加文件 成功")

          console.log(service.fileList)
          service.upload(0);
        })

        
      }
    });
  }

  delVideo(index){

    this.props.clearOne(index)

    console.log("delvideo2")
    // console.log(this.state.arr)
    // this.props.fileList.splice(index,1)
    console.log(this.props.fileList)

    // var arr2=this.state.arr;
    // arr2.splice(index,1)

    // // console.log(arr)

    this.setState({
      arr:this.props.fileList.splice(index,1)
    })

    

  }



  render() {
    console.log("render方法执行-----")
    console.log("uploadFilelistActive:",this.props.uploadFilelistActive)

    var fileList=this.props.fileList;

    // var arr = Array.prototype.slice.call(fileList);
    
    console.log("fileList is",fileList)
    
    if (this.state.reload) {
      return null;
    } else {
      return (
          <div className={ this.props.uploadFilelistActive?'show upload_toast':'hide upload_toast'}>
            <div className="upload_title">上传列表<img src={videoListPanelClose} className={'videolist-panel-close'} onClick={this.props.closeUploadFilesPOPUP}/></div>
            <ul className="upload_content">
                {
                  fileList.map((i,v)=>{
                      return (
                        <li id={v} key={v}>
                            <img src={videoFileClose} className={'video-file-close'} onClick={this.delVideo.bind(this,v)}/>
                            <div className="upload_video">
                              <img src={placeholder} id="placehold" />
                              <video src={window.URL.createObjectURL(i)} className={'video-preview'}></video>
                            </div>
                            <input type="text" id="filename" maxLength={50} className={"input-video-title"} placeholder="标题不超过50字" onBlur={(e) => this.inputtitle(e,v)} />
                        </li>
                      )
                    })
                }
            </ul>
            <div className={'bottom-btns'}>
                
              <div className={'btn select-btn'}>
               选择视频<input type="file" className="file" multiple onChange={this.props.onChange.bind(this)}/>
              </div>
              <button id="btn" onClick={this.startUpload.bind(this)} className={'btn upload-btn'}>确认上传</button>
            </div>
            
          </div>
      );
    }
  }
}
export default uploadtitle;
